<template>
  <div class="address_wrapper">
    <address-header :headTitle="headTitle"></address-header>
    <div class="address_list">
      <div class="address_item" v-for="(item, index) in addressList" :key="index" @click.prevent.stop="chooseAddress(item, index)">
        <div class="addresscard">
          <div class="addresscard_con">
            <p class="user">
              <span class="username">{{item.name}}</span>
              <span class="gender">{{item.sex == 1 ? '先生' : '女士'}}</span>
              <span>{{item.phone}}</span>
            </p>
            <p class="address">
              <span v-if="item.tag" :content="item.tag" :style="{backgroundColor: iconColor(item.tag)}" class="address_tag home">{{item.tag}}</span>
              <span class="text">{{item.address + item.address_detail}}</span>
            </p>
          </div>
          <div class="operation">
            <span class="iconfont edit">&#xe643;</span>
            <span class="iconfont clear" @click="deleteSite(index, item)">&#xe60e;</span>
          </div>
        </div>
      </div>
    </div>
    <router-link to='/profile/address/add' class="link">
      <div class="addressview_bottom">
        <span class="iconfont edit">&#xe686;</span>
        <span class="bottom_text">新增收货地址</span>
      </div>
    </router-link>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import AddressHeader from '@/components/header/Header'
export default {
  name: 'Address',
  data () {
    return {
      headTitle: '收货地址',
      addressList: [] // 收货地址列表
    }
  },
  components: {
    AddressHeader
  },
  mounted () {
    this.initData()
  },
  computed: {
    ...mapState(['userInfo', 'removeAddress'])
  },
  methods: {
    ...mapActions(['saveAddress']),
    // 初始化信息
    initData () {
      if (this.userInfo && this.userInfo.user_id) {
        this.$api.home.getAddressList(this.userInfo.user_id).then(res => {
          this.addressList = res.data
        })
      }
    },
    iconColor (name) {
      switch (name) {
        case '家': return '#ff5722'
        case '公司': return '#4cd964'
        case '学校': return '#3190e8'
      }
    },
    // 删除地址
    deleteSite (index, item) {
      if (this.userInfo && this.userInfo.user_id) {
        this.$api.home.deleteAddress(this.userInfo.user_id, item.id)
        this.removeAddress.splice(index, 1)
      }
    }
  },
  watch: {
    userInfo (value) {
      if (value && value.user_id) {
        this.initData()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .address_wrapper
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background-color: #f2f2f2
    z-index: 99
    padding-top .88rem
    .address_list
      .address_item
        padding: 0 0 .3rem
        background-color: #fff
        border-bottom: .01rem solid #ddd
        .addresscard
          display: flex
          line-height: 1
          padding: .3rem .3rem 0
          height: 100%
          .addresscard_con
            flex: 1
            overflow: hidden
            line-height: 1
            height: 100%
            width: 100%
            .user
              font-size: .28rem
              color: #666
              margin-bottom: .1rem
              ellipsis()
              .username
                font-size: .32rem
                font-weight: 700
            .address
              color: #999
              font-size: .28rem
              display: flex
              align-items: center
              .address_tag
                display: inline-block
                position: relative
                flex: none
                margin-right: .08rem
                padding: .02rem
                color: transparent
                white-space: nowrap
                border: .01rem solid #3190e8
                border-radius: .05rem
                font-size: .28rem !important
                line-height: .28rem
                &.address_tag:after
                  content: attr(content)
                  position: absolute
                  top: 0
                  left: 0
                  color: #3190e8
                  font-size: .45rem
                  padding: .08rem
                  text-align: center
                  line-height: .5rem
                  z-index: 1
                  white-space: nowrap
                  transform: scale(.5)
                  transform-origin: 0 0
                &.home
                  border-color: #fff
                  &:after
                    color: #fff
          .operation
            flex-basis: 1rem
            display: flex
            justify-content: space-between
            align-items: center
    .addressview_bottom
      position: fixed
      height: 1rem
      bottom: 0
      width: 100%
      z-index: 5
      background: #fff
      display: flex
      justify-content: center
      align-items: center
      border-top: .01rem solid #ddd
      color: #3190e8
      font-size: .32rem
      .edit
        width: .38rem
        height: .38rem
        font-size: .24rem
        text-align: center
        line-height: .4rem
        border: .01rem solid #3190e8
        margin-right: .15rem
        border-radius: 50%
    .router-slid-enter-active, .router-slid-leave-active
        transition: all .4s
    .router-slid-enter, .router-slid-leave-active
        transform: translate3d(2rem, 0, 0)
        opacity: 0
</style>
